<script lang="ts" setup>
  import { reactive, ref, watch } from "vue"
  import { getShopCommunicateList, deleteShopCommunicateById } from "@/api/store"
  import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"
  import { usePagination } from "@/hooks/usePagination"
  import useTable from '@/hooks/useTable'
  import communicateHandle from '@/views/communicate/components/handle.vue'

  interface Props {
    shopId?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    shopId: 0
  })

  const loading = ref<boolean>(false)
  const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
  const tableData = ref<any>([])
  const activeRow = ref({})
  const showCommunicate = ref(false)

  const getTableData = () => {
    loading.value = true
    getShopCommunicateList({
      ...paginationData,
      shopId: props.shopId
    }).then((res: any) => {
      paginationData.total = res.totalCount
      tableData.value = res.data
    }).catch(() => {
      tableData.value = []
    }).finally(() => {
      loading.value = false
    })
  }

  const { handleSelectionChange, handleDelete } = useTable({getList:getTableData})


  //新增操作按钮
  const handleAdd = () => {
    activeRow.value = {}
    showCommunicate.value = true
  }

  const handleUpdate = (e: any) => {
    activeRow.value = e
    showCommunicate.value = true
  }

  //关闭操作框
  const closeHandle = () => {
    showCommunicate.value = false
  }

  //操作完成
  const successHandle = () => {
    showCommunicate.value = false
    getTableData()
  }

  watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div>
    <div style="display:flex;align-items: center;">
      <div class="form-card-title-hr">最近沟通事项</div>
      <el-button type="primary" style="margin-left:20px;"  @click="handleAdd" >添加沟通事项</el-button>
    </div>
    <div v-loading="loading"  class="table-wrapper">
      <el-table :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="communicateDate" label="沟通时间"  />
        <el-table-column prop="shopName" label="门店名称"  />
        <el-table-column prop="franchiseeName" label="老板姓名"  />
        <el-table-column prop="title" label="事项信息"  />
        <el-table-column prop="result" label="结果"  />
        <el-table-column prop="adminName" label="督导姓名"  />
        <el-table-column fixed="right" label="操作" width="150" >
          <template #default="scope">
            <el-button type="primary" text size="small" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" text size="small" @click="handleDelete(deleteShopCommunicateById, scope.row.shopCommunicateId, scope.row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-wrapper">
      <el-pagination
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :currentPage="paginationData.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <communicateHandle
    v-if="showCommunicate"
    :shopId="props.shopId"
    :data="activeRow"
    @success="successHandle"
    @cancel="closeHandle"
  />
</template>

<style lang="scss" scoped>

</style>
